<template>
    <div class="login">
        <div class="left">
            <div class="title">
                vite-admin-template管理系统模版
                <p class="text-size-12px">
                    一个开箱即用，快速搭建大型应用的 Vue3 + Vite2 + TypeScript + pinia +
                    element-plus 模板框架。
                </p>
                <p class="text-size-12px">
                    集成了各类插件，并进行了模块化和按需加载的优化，可以放心使用!!!
                </p>
            </div>
            <img :src="logoBg" alt="" />
        </div>
        <div class="right">
            <div class="des">
                欢迎登录
                <svg-icon name="svg-add" color="green" size="20px" />
                <el-icon><Aim /></el-icon>
            </div>
            <el-form :model="loginForm" :rules="rules" ref="ruleFormRef" class="el-forms">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        placeholder="请输入密码"
                        v-model="loginForm.password"
                        show-password
                        autocomplete="new-password"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button class="login_btn" type="primary" @click="loginBtn(ruleFormRef)"
                        >登录</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import useRedirect from './useRedirect';
import useElLoading from '@/hooks/useElLoading';
import { useLoginInfo } from '@/store/modules/user';

// import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import logoBg from '@/assets/images/login-bg.png';
export default defineComponent({
    name: 'Login',
    components: {},
    setup() {
        const router = useRouter();
        const ruleFormRef = ref<FormInstance>();

        // login 的store
        const loginStore = useLoginInfo();
        // redirect的路由hooks
        const state = useRedirect();

        const loginForm = reactive({
            username: 'admin',
            password: '123456'
        });
        const rules = reactive({
            username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        });

        const loginBtn = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            formEl.validate(async (valid: any) => {
                if (valid) {
                    // 全局loading服务hooks
                    const loading = useElLoading();
                    try {
                        const res = await loginStore.login(loginForm);
                        //必须在dom加载完后关闭
                        nextTick(() => {
                            loading?.close();
                            router.push({
                                path: state.redirect || '/home',
                                query: state.otherQuery
                            });
                            ElMessage.success(res.message || '登录成功');
                        });
                    } catch {
                        nextTick(() => {
                            setTimeout(() => {
                                loading?.close();
                            }, 500);
                        });
                    }
                }
            });
        };

        return {
            loginForm,
            rules,
            loginBtn,
            ruleFormRef,
            logoBg
        };
    }
});
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    min-height: 100%;
    background-color: #f7f8f9;
    overflow-y: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 200px;

    .left {
        .title {
            font-size: 36px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #3f4f83;
            line-height: 50px;
            text-align: left;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        width: 352px;
        height: 352px;
        background: #fff;
        box-shadow: 4px 4px 20px 0 #e5e5e5;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 25px;

        .des {
            font-size: 18px;
            color: #333;
            margin: 45px auto 28px auto;
            text-align: center;
            font-weight: 400;
            font-family: PingFangSC-Regular, PingFang SC;
        }

        .el-forms {
            width: 300px;

            :deep(.el-form-item) {
                margin-bottom: 30px;
            }

            :deep(.el-input__inner) {
                height: 40px;
                border-radius: 8px;
            }

            .login_btn {
                width: 300px;
                height: 40px;
                border-radius: 8px;
                font-size: 20px;
            }
        }
    }
}
</style>
